<template>
  <div class="global">
    <div class="head">
      <div class="avator"><img :src="avatar" alt="" /></div>
      <div class="info">
        <p>下午好呀{{ username }}</p>
        <div>BLAZER甄选运营平台</div>
      </div>
    </div>
    <div class="bottomblazer"><img src="../assets/blazer.png" alt=""></div>
    <div id="myEChartsBar"></div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

const avatar = ref("");
const username = ref("");
username.value = window.localStorage.getItem("name");
avatar.value = window.localStorage.getItem("avator");
const intchart=(xres,yres)=> {
      const myEChart= echarts.init(document.getElementById("myEChartsBar"));
      const option = {
        xAxis: {
          data: xres,
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            data: yres,
          },
        ],
      };
      myEChart.setOption(option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        myEChart.resize();
      });
    };
onMounted(() => {
  const yres=[10,20];
  const xres=["1","2"]
  intchart(xres,yres)
});
</script>
<style scoped>
.info div{
  font-style: italic;
      color: skyblue;
}
.info p{
      font-size: 30px;
    font-weight: 900;
    margin-bottom: 11px;
}
.info {
  width: calc(100% - 100px);
  height: auto;
  padding-left: 15px;
  float: left;
  box-sizing: border-box;
}
.avator {
  width: 100px;
  height: 100px;
  float: left;
}
#myEChartsBar{
  width: 200px;
  height: 200px;
}
.avator img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.global {
  width: 100%;
  height: 100%;
}
.head {
  width: 100%;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.bottomblazer img{
  height: 300px;
}
.bottomblazer{
  width: 100%;
  height: auto;
  text-align: center;
}
</style>